<!--利率/均价-->
<template>
  <a-card
    style="height: 100%; display: flex; flex-direction: column"
    :bodyStyle="{ flex: 1, height: 0, padding: '24px' }"
  >
    <template #title>
      <cu-icon class="icon-primary" type="org-lishuaichaxun" />
      利率/均价
    </template>
    <a-spin :spinning="spinning">
      <div class="price-box">
        <div class="price-total">
          <div class="total-text">{{ data.rent_in_real_price || 0 }} 元/m²·天</div>
          <div class="total-tip">在租实时均价</div>
        </div>
        <div class="price-chart">
          <div
            class="price-chart-item"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="price-title">
              <span style="margin-right: 4px">{{ item.name }}</span>
              <a-tooltip placement="top">
                <template #title>
                  {{ item.tips1 }}
                  <span v-if="item.tips2">
                    <br />
                    {{ item.tips2 }}
                  </span>
                </template>
                <QuestionCircleOutlined />
              </a-tooltip>
            </div>
            <div class="price-progress">
              <a-progress
                :percent="item.percent"
                :strokeWidth="16"
                :showInfo="false"
                status="normal"
                strokeColor="#6395fa"
                trailColor="#e5efff"
              />
              <a-tooltip placement="topLeft" :title="item.percent + '%'">
                <div class="progress-info">{{ item.percent }}%</div>
              </a-tooltip>
            </div>
          </div>
        </div>
      </div>
    </a-spin>
  </a-card>
</template>
<script>
import { defineComponent, ref, computed, watch, reactive, toRefs } from "vue";
import request from "../../../common/utils/request";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "houseAverPrice",
  components: {
    QuestionCircleOutlined,
  },
  setup(props, context) {
    const state = reactive({
      list: [
        {
          name: "出租率",
          tips1: "当前出租房间面积在总房源面积中的占比。",
          tips2: "*不招商房源不参与计算",
          percent: 0,
        },
        {
          name: "空置率",
          tips1: "当前空置的房间面积在总房源面积中的占比。",
          tips2: "*不招商房源不参与计算",
          percent: 0,
        },
        {
          name: "计租率",
          tips1: "计租率：今年截至当前的计租率。",
          tips2: "预计全年计租率：今年全年的计租率预测。",
          percent: 0,
        },
        // {
        //   name: '预算完成率',
        //   tips1: '写字楼当年应收金额在预计需要完成目标金额的占比，需要先设置收入目标可显示结果。',
        //   tips2: '',
        //   percent: 0,
        // },
      ],
      spinning: false,
      data: {},
    });

    const getData = () => {
      state.spinning = true;
      request
        .get("/org", "/workbench/villageBuildProfile")
        .then((res) => {
          state.data = res?.countData || {};
          state.list.forEach((item) => {
            if (item.name === "出租率") {
              item.percent = Number(res?.countData?.rent_in_precent || 0);
            }
            if (item.name === "空置率") {
              item.percent = Number(res?.countData?.empty_precent || 0);
            }
            if (item.name === "计租率") {
              item.percent = Number(res?.countData?.rental_rate || 0);
            }
            // if (item.name === '预算完成率') {
            //   item.percent = Number(res?.countData?.expect_completion_rate || 0);
            // }
          });
          state.spinning = false;
        })
        .catch((err) => {
          state.spinning = false;
        });
    };

    getData();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-progress-text) {
  color: #666;
}
.price-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .price-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    .total-text {
      font-size: 24px;
      color: #666;
      margin-bottom: 6px;
    }
    .total-tip {
      font-size: 14px;
      height: 26px;
      padding: 0 12px;
      line-height: 26px;
      color: #f27f2c;
      border-radius: 14px;
      background-color: #fff1c0;
    }
  }
  .price-chart {
    margin-top: 36px;
    margin-bottom: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    &-item {
      display: flex;
    }
  }
  .price-title {
    width: 100px;
  }
  .price-progress {
    flex: 1;
    display: flex;
  }
}
.progress-info {
  margin-left: 10px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
.icon-primary {
  color: @primary-color;
  font-size: 18px;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
</style>
